<template>
	<div>
		<header-title :titleT="titleT" />
		<div class="h-group-t"></div>
		{{ titleT }}
		<search-filter :tagData="tagData" @update-checked-values="handleCheckedValues" />
		<div class="h-group-t"></div>
		<slots-card
			iconName="minigames-icon"
			:titleT="titleT"
			:type="dataType"
			:modelValue="dataType"
			:tagData="tagData"
			:checkedValues="checkedValues" />
		<div class="h-group-t"></div>
		<game-list type="provider"></game-list>
		<div class="h-group-t"></div>
		<live-rank />
	</div>
</template>
<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import LiveRank from '../components/live-rank.vue'
import GameList from '@/components/slots/game-list/index.vue'
import SearchFilter from '../components/search-panel/index.vue'
import HeaderTitle from '../components/header-title.vue'
import SlotsCard from '@/components/slots/slots-card/index.vue'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import { useRequest } from '@/hooks'
import { onMounted } from 'vue'
import { getGameTagList } from '@/api/other'
import { t } from '@/utils'

const { run, data } = useRequest<any>(getGameTagList)
const tagData = ref<{ id: string; gameTagGroupId: string }>({
	id: '',
	gameTagGroupId: ''
})
const titleT = ref('')
const checkedValues = ref<string[]>([])

const props = defineProps({
	title: {
		type: String,
		default: ''
	}
})
const updateTitleT = (dataType: any) => {
	if (dataType === '2up') {
		titleT.value = 'casinoAll.2up'
	} else {
		titleT.value = 'casinoAll.blackjack'
	}
	getData()
}
const getData = async () => {
	await run({ displayLocation: 'CASINO_LOBBY_UPPER_TAG_DISPLAY' })
	const selectedObjects = data.value.filter((item: any) => item.labelName === t(titleT.value))
	if (selectedObjects.length > 0) {
		tagData.value = {
			id: selectedObjects[0].id,
			gameTagGroupId: selectedObjects[0].gameTagGroupId
		}
	} else {
		tagData.value = {
			id: '',
			gameTagGroupId: ''
		}
	}
}

const route = useRoute()
const dataType = computed(() => {
	return route.params.game
})
onMounted(() => {
	if (props.title === '') {
		updateTitleT(dataType.value)
	} else {
		titleT.value = props.title
	}
})
// watch(dataType, (newDataType) => {
// 	if (props.title === '') {
// 		updateTitleT(newDataType)
// 	}
// })
// watch(
// 	() => props.title,
// 	(newTitle) => {
// 		titleT.value = newTitle
// 		if (newTitle === '') {
// 			updateTitleT(dataType.value)
// 		}
// 	}
// )
watchEffect(() => {
	titleT.value = props.title
	if (props.title === '') {
		updateTitleT(dataType.value)
	}
})
const handleCheckedValues = (values: string[]) => {
	checkedValues.value = values
	// console.log(values)
}
</script>
